<!--
 * @Description: 组织架构模块
 * @Author: yue
 * @Date: 2022-08-31 14:23:06
 * @LastEditors: yue
 * @LastEditTime: 2022-09-03 22:18:51
-->

<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <tree-tools :obj="company" :is-root="true" @addDept="addDept"></tree-tools>
        <el-tree :props="defaultProps" :data="departs" :default-expand-all="true">
          <tree-tools slot-scope="{ data }" :obj="data" @addDept="addDept" @delDept="getDepartments" @editDept="editDept"></tree-tools>
        </el-tree>
        <add-dept ref="editDept" :obj="obj" :show-dialog.sync="showDialog" @addDept="getDepartments"></add-dept>
      </el-card>
    </div>
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import AddDept from './components/AddDept.vue'

import { getDepartments, getDeptDetail } from '@/api/departments'
import { getTreeData } from '@/utils/index'

export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      company: {}, // 公司信息
      departs: [], // 部门信息
      showDialog: false, // 显示弹出层
      loading: false,
      obj: {}, // 当前操作的部门信息
      // 组件默认属性
      defaultProps: {
        label: 'name',
        manager: 'manager'
      }
    }
  },
  mounted() {
    this.getDepartments()
  },
  methods: {
    // 获取组织架构
    async getDepartments() {
      this.loading = true
      const res = await getDepartments()
      this.company = { name: res.companyName, manager: res.companyManage, id: '' }
      this.departs = getTreeData(res.depts, '')
      this.loading = false
    },
    // 添加组织架构
    addDept(obj) {
      this.showDialog = true
      this.obj = obj
    },
    async editDept(obj) {
      this.showDialog = true
      this.obj = obj
      this.$refs.editDept.formData = await getDeptDetail(obj.id)
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
